<!-- 棋盘 -->
<script>
import suan from '../tools'
import MapRow from './MapRow.vue';

export default {
    data() {
        return {
            MapInfo: new Array(16),
            isMe: true,
        };
    },
    mounted() {
        this.initMap();
        console.log("棋盘信息", this.MapInfo);
        //修改棋位
        this.$bus.on('setPices', this.setPices);
    },
    components: { MapRow },
    methods: {
        //初始化棋盘
        initMap() {
            this.MapInfo = new Array(16);
            for (let i = 0; i < this.MapInfo.length; i++) {
                this.MapInfo[i] = new Array(16).fill(0);
            }
        },
        //修改棋位信息
        setPices({ x, y, who }) {
            if (who && who == 2 && this.isMe == false) {
                return alert('还没有轮到你下，别急')
            }

            if (this.MapInfo[x][y] != 0) {
                return alert('这里已经有子了');
            }
            this.MapInfo[x][y] = this.isMe ? 2 : 1;
            this.isMe = !this.isMe

            //等待动画播放
            setTimeout(() => {
                if(this.isSuccess()){
                    this.isMe = true;
                    return;
                }
                
                //机器下
                if (!this.isMe) {
                    let xia = suan.getBestPosition(this.MapInfo);
                    console.log('机器下在了',JSON.stringify(xia));
                    if (xia) {
                        this.setPices(xia);
                    } else {
                        alert('机器不会下了')
                    }
                }
            }, 777);
        },
        //判断棋盘局势
        isSuccess() {
            let num = suan.situation(this.MapInfo)
            if (num == 1) {
                alert('啊哦~~~你输了/(ㄒoㄒ)/~~');
                this.initMap();
                return true;
            }
            if (num == 2) {
                alert('你赢了，真棒ヾ(@^▽^@)ノ');
                this.initMap();
                return true;
            }
            return false;
        }
    }
}
</script>
<template>
    <div id="pankj">
        <MapRow v-for="(e, i) in MapInfo" :rowInfo='e' :key="'行' + i" :x='i' />
    </div>
</template>
<style scoped>
#pankj {
    width: 576px;
    line-height: 0;
    border: 2px solid rgb(10, 7, 7);
    margin: 3vh auto;
    background-color: rgba(167, 94, 4, 0.312);
    z-index: -3;
}
</style>